import Vue from 'vue'
//import VueRouter from 'vue-router'
import VueRouter from '../vue-router'//自己写的
import Home from '../views/Home.vue'
import About from '../views/About.vue'
// 给每个组件都增加两个属性 $route 放所有路由相关的属性 $router 放了一些方法 [Vue.prototype 原形]
// 还提供了两个组件 router-view,router-link [Vue.component 全局组件]
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About,
    children:[
      {
        path:'a',//这个路径前面不能加/
        component:{
          render(h){return <h1>this is an about/a</h1>}
        }
      },
      {
        path:'b',//这个路径前面不能加/
        component:{
          render(h){return <h1>this is an about/b</h1>}
        }
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

//动态添加路由
// router.addRoutes([{path:'/home',component:{}}])//弃用

// router.addRoute({name:'home',path:'/home',component:{}})
// router.addRoute({
//   name:'home1',
//   path:'/home1',
//   component:Home1,
//   children:[{path:'son',comonent:Son}]
// })

//全局钩子，回调函数，路由生命周期
// 导航被触发。
// 在失活的组件里调用 beforeRouteLeave
// 调用全局的 beforeEach
// 在重用的组件里调用 beforeRouteUpdate 守卫
// 在路由配置里调用 beforeEnter
// 解析异步路由组件
// 在被激活的组件里调用 beforeRouteEnter
// 调用全局的 beforeResolve
// 导航被确认
// 调用全局的 afterEach
// 触发 DOM 更新
// 调用 beforeRouteEnter 传 next，创建好的组件实例会作为回调函数的参数传入
router.beforeEach((from,to,next)=>{
  //先执行钩子里的，再通过next()渲染页面
  //可以设置权限，存状态
  console.log('1，跳转页面延时')
  setTimeout(()=>{
    next()
  },1000)
})

router.beforeEach((from,to,next)=>{
  console.log('2，跳转页面延时')
  setTimeout(()=>{
    next()
  },1000)
})

export default router
